<template>
  <div id="login">
    <v-xheader inreg="1"></v-xheader>
    <div class="dis60"></div>
    <div class="login-wrap" v-if="!isLogin">
      <div class="login-form-wrap" >
        <ul class="login-tab">
          <li class="cur">账户登录</li>
        </ul>
        <div class="dis20"></div>
        <el-form :model="loginForm"
                :rules="loginRules"
                ref="loginForm"
                 >
          <el-form-item prop="uname">
            <el-input type="text"
                      :maxlength="30"
                      placeholder="请输入用户名"
                      v-model="loginForm.uname">
            </el-input>
          </el-form-item>
          <el-form-item prop="upass">
            <el-input type="password"
                      :maxlength="16"
                      placeholder="请输入密码"
                      v-model="loginForm.upass">
          </el-input>
          <div class="dis20"></div>
          </el-form-item>
            <el-checkbox v-model="checked">记住密码</el-checkbox>
          <div class="dis15"></div>
          <el-form-item>
            <el-button type="primary" style="width:100%;"
                      @click="submitForm"
                      :class="{'disabled': btnDisabled}">
                      立即登录
            </el-button>
          </el-form-item>
        </el-form>
        <div style="overflow: hidden;font-size: 12px;">
          <div style="float: left;">
            <router-link to="/find_pass">
              <span class="font-gray">忘记密码?</span> <span class="font-blue">找回密码</span>
            </router-link>
          </div>
          <div>
            <div style="float: right;">
              <router-link to="/register">
                <span class="font-gray">还没账户? </span> <span class="font-blue">立即注册</span>
              </router-link>
            </div>
          </div>

        </div>
        <div class="dis10"></div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  mapActions,
  mapGetters
} from 'vuex'
import cache from '@cache'
export default {
  name: 'login',
  data () {
    return {
      checked: true,
      loginForm: {
        uname: '',
        upass: '',
        rember:''
      },
      loginRules: {
        uname: [
          { required: true, message: '未填写用户名', trigger: 'blur' },
        ],
        upass: [
          { required: true, message: '未填写密码', trigger: 'blur' },
          { min: 6, message: '密码不能少于6位', trigger: 'blur' }
        ]
      },
      message: ''
    }
  },
  computed: {
    ...mapGetters([
      'userinfo',
      'isLogin'
    ]),
    btnDisabled () {
      return this.loginForm.uname === '' ||
            this.loginForm.upass === '' ||
            this.loginForm.upass.length < 6
    }
  },
  created () {
    if (this.isLogin) {
      this.$router.push({'path':'/'})
    }
  },
  mounted () {
      if(cache.get('uname')){
        this.loginForm.uname = cache.get('uname')
      }

  },
  methods: {
    ...mapActions([
      'signLogIn'
    ]),
    submitForm () {
      const self = this;  // 记住密码
        if(this.checked){
            this.loginForm.rember=1
        }else{
          this.loginForm.rember=0
        }
      this.$refs['loginForm'].validate((valid) => {
        if (valid) {
          this.signLogIn(this.loginForm)
            .then((res) => {
              if (res.status !== 1) {
                this.$error(res.msg)
              }else{
                cache.set('uname', this.loginForm.uname)
                this.$success(res.msg)
                this.$router.push({'path':'/'})
              }
            })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss">
#login {height:100%;background-size:cover;}
.login-wrap {width: 420px;margin: 0px auto;}
.login-form-wrap {background-color:#fff;padding: 50px 60px; border-radius: 0px;}
ul.login-tab {border-bottom:solid 1px #efefef;}
ul.login-tab li {display:inline-block; padding: 0 12px; height: 32px; line-height:32px;}
ul.login-tab li.cur {color:#212121;font-weight: 700;border-bottom:solid 2px #777;}
</style>
